<template>
  <div class="login-page">
    <!-- 页面整体容器 -->
    <div class="content">
      <h1>欢迎登录计算机学科智慧平台</h1>
      <!-- 登录按钮 -->
      <el-button type="primary" @click="showLoginDialog">登录</el-button>
    </div>

    <!-- 登录弹框组件 -->
    <LoginDialog ref="loginDialogRef" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import LoginDialog from "@/components/LoginDialog0.vue";

const loginDialogRef = ref(null);

// 显示登录弹框
const showLoginDialog = () => {
  loginDialogRef.value.openDialog();
};
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使页面垂直居中 */
  background-color: #f4f6f9;
  text-align: center;
}

.content h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}
</style>

